<template>
	<u-popup mode="bottom" v-model="show">
		<view class="content">
			<view class="c-top">
				<view class="row between" style="position: relative;padding: 0 30upx;">
					<view class="c-top-title" style="color: #666666;" @tap="show = false">取消</view>
					<view class="c-top-title" style="font-weight: bold;">选择服务时间</view>
					<view class="c-top-title" style="color: #2781A7;" @tap="confirm">完成</view>
					<!-- <view class="c-top-icon" @tap="show=false"><u-icon name="close"></u-icon></view> -->
				</view>
			</view>

			<view class="c-main row">
				<view class="c-left">
					<view class="c-left-item" v-for="(item, index) in weekList" :key="index" :class="{ active: current == index }" @tap="current = index">{{ item.week }}</view>
				</view>
				<scroll-view class="scroll-view" scroll-y :scroll-into-view="scrollIntoView">
					<view class="c-left-item" v-for="(v, k) in timeList" :key="k" :class="{ active: currentIndex == k }" :id="`item${k}`" @tap="currentIndex = k">
					{{ v.time}}
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { date } from '@/common/js/util';
export default {
	data() {
		return {
			show: false,
			current: 0,
			dataList: [],
			currentIndex: 7,
			scrollIntoView: ''
		};
	},
	computed: {
		weekList() {
			let time = new Date().getTime();
			let week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			let arr = [];
			for (let i = 0; i < 7; i++) {
				let index = new Date(time + 24 * 60 * 60 * 1000 * i).getDay();
				let obj = {
					week: week[index],
					date: date('Y-m-d', new Date(time + 24 * 60 * 60 * 1000 * i)),
					md: date('m-d', new Date(time + 24 * 60 * 60 * 1000 * i))
				};
				arr.push(obj);
			}
			return arr;
		},
		timeList() {
			let arr = [];
			for (let i = 0; i < 25; i++) {
				if (i < 24) {
					let next = i + 1;
					let starTime=i<10?`0${i}:00`:`${i}:00`;
					let endTime=next<10?`0${next}:00`:`${next}:00`;
					let time = `${starTime}~${endTime}`;
					let obj={
						starTime,
						endTime,
						time
					}
					arr.push(obj);
				}
			}
			return arr;
		}
	},
	methods: {
		open() {
			this.show = true;
			let time = new Date().getHours();
			this.currentIndex = time;
			this.$nextTick(()=>{
				this.scrollIntoView = `item${time}`;
			})	
		},
		confirm() {
			this.show = false;
			let current = this.weekList[this.current];
            let time=this.timeList[this.currentIndex];
			this.$emit('confirm', { current ,time});
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	position: relative;
	height: 660upx;
}
.c-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100upx;
	border-bottom: 1px solid #e7e7e7;
}
.c-top-title {
	height: 100upx;
	font-size: 30upx;
	// font-weight: bold;
	color: #000000;
	line-height: 100upx;
}
.c-top-icon {
	position: absolute;
	top: 30upx;
	right: 30upx;
}
.c-main {
	padding-top: 100upx;
	height: 660upx;
}
.c-left {
	width: 222upx;
	background: #f6f6f6;
}
.c-left-item {
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	border-bottom: 1px solid #e7e7e7;
	font-size: 28upx;
	color: #333333;
}
.active {
	background: #2781a7;
	color: #ffffff;
}
.scroll-view {
	height: 560upx;
}
</style>
